<template>
    <div>
     	<head-top></head-top>
        <el-row style="margin-top: 20px;">
  			<el-col :span="14" :offset="4">
	  			<el-form :model="foodForm" :rules="foodrules" ref="foodForm" label-width="110px" class="form food_form">
					  <header class="form_header">基本信息</header>
					  <el-form-item label="商品名称" prop="name">
						<el-input v-model="foodForm.name"></el-input>
					</el-form-item>
					<el-form-item label="分类管理" prop="name">
						<el-select v-model="foodForm.catNo" :placeholder="selectValue.label" style="width:100%;">
							<el-option
								v-for="item in categoryForm.categoryList"
								:key="item.catNo"
								:label="item.catName"
								:value="item.catNo">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="计量单位" prop="name">
						<el-input v-model="foodForm.measure"></el-input>
					</el-form-item>
					<el-form-item label="商品描述" prop="name">
						<el-input type="textarea" v-model="foodForm.description"></el-input>
					</el-form-item>
					<header class="form_header">商品规格</header>
					<el-row>
						<el-form-item label="销售价格">
							<el-input-number v-model="foodForm.price" :min="0" :max="10000"></el-input-number>
						</el-form-item>
					</el-row>
					<el-row style="overflow: auto; text-align: left;">
						<el-button type="primary" @click="dialogFormVisible = true" style="margin: 0 0 10px 20px;">添加规格</el-button>
						<el-table
					    :data="foodForm.specs"
					    style="margin-bottom: 20px;"
					    :row-class-name="tableRowClassName">
						    <el-table-column
						      prop="cost"
						      label="成本价格">
						    </el-table-column>
						    <el-table-column
						      prop="inventory"
						      label="库存">
						    </el-table-column>
						    <el-table-column
						      prop="mininventory"
						      label="预警库存">
						    </el-table-column>
							<el-table-column
						      prop="color"
						      label="颜色">
						    </el-table-column>
						    <el-table-column label="操作" width="150px">
						    <template slot-scope="scope">
						        <el-button
						          size="small"
						          type="danger"
						          @click="deleteRow(scope.$index)">删除</el-button>
						    </template>
						    </el-table-column>
						</el-table>
					</el-row>
					<header class="form_header">其他设置</header>
					<el-form-item label="配送方式">
						<el-radio class="radio" v-model="foodForm.delivery" label="0">同城自提</el-radio>
  						<el-radio class="radio" v-model="foodForm.delivery" label="1">快递配送</el-radio>
						<el-radio class="radio" v-model="foodForm.delivery" label="2">同城自提</el-radio>
					</el-form-item>
					<el-form-item label="上架时间">
						<el-radio class="radio" v-model="foodForm.putawayTime" label="0">暂不上架</el-radio>
  						<el-radio class="radio" v-model="foodForm.putawayTime" label="1">立即上架</el-radio>
						<el-radio class="radio" v-model="foodForm.putawayTime" label="2">定时上架</el-radio>
					</el-form-item>
					<el-form-item label="选择时间">
						<el-date-picker
							v-model="foodForm.time"
							type="datetime"
							placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item style="text-align: center ;margin-top:50px">
						<el-button type="primary" @click="addFood('foodForm')">下一步</el-button>
						<el-button style="margin-left:80px">放弃添加</el-button>
					</el-form-item>
	  			</el-form>
	  			<el-dialog title="添加规格" :visible.sync="dialogFormVisible">
				  	<el-form :rules="specsFormrules" :model="specsForm" ref="specsForm">
					    <el-form-item label="成本价格" label-width="100px" >
					     	<el-input v-model="specsForm.cost" auto-complete="off"></el-input>
					    </el-form-item>
					    <el-form-item label="库存" label-width="100px" >
					     	<el-input v-model="specsForm.inventory" auto-complete="off"></el-input>
					    </el-form-item>
						<el-form-item label="预警库存" label-width="100px" >
					     	<el-input v-model="specsForm.mininventory" auto-complete="off"></el-input>
					    </el-form-item>
						<el-form-item label="颜色" label-width="100px">
					     	<el-input v-model="specsForm.color" auto-complete="off"></el-input>
					    </el-form-item>
				  	</el-form>
				  <div slot="footer" class="dialog-footer">
				    <el-button @click="dialogFormVisible = false">取 消</el-button>
				    <el-button type="primary" @click="addspecs">确 定</el-button>
				  </div>
				</el-dialog>
  			</el-col>
  		</el-row>
    </div>
</template>

<script>
 	import headTop from '@/components/headTop'
    import {getCategory, addCategory, addFood,findItemCat} from '@/api/getData'
    import {baseUrl, baseImgPath} from '@/config/env'
    export default {
    	data(){
    		return {
				value1:"",
    			baseUrl,
    			baseImgPath,
    			restaurant_id: 1,
    			categoryForm: {
    				categoryList: [],
    				categorySelect: '',
    				name: '',
    				description: '',
    			},
    			foodForm: {
					name: '',
					catNo:"",//分类
					measure:"",//计量单位
					description: '',//商品描述
					price:"0",//销售价格
					specs:[],
					delivery:"0",//配送方式
					putawayTime:"0",//上架时间
    				time:"",//时间
    				
    			},
    			foodrules: {
    				name: [
						{ required: true, message: '不能为空', trigger: 'blur' },
					],
    			},
    			showAddCategory: false,
    			dialogFormVisible: false,
		        specsForm: {
		          	cost: "",
		          	inventory: "",
					mininventory: "",
					color:""
		        },
		        specsFormrules: {
		        	name: [
						{ required: true, message: '请输入商品名称', trigger: 'blur' },
					],
		        }
    		}
    	},
    	components: {
    		headTop,
    	},
    	created(){
    		
    		this.initData();
    	},
    	computed: {
    		selectValue: function (){
    			return this.categoryForm.categoryList[this.categoryForm.categorySelect]||{}
    		}
    	},
    	methods: {
			// 获取分类
    		async initData(){
    			try{
    				const result = await findItemCat();
	    			if (result.retCode == 200) {
	    				this.categoryForm.categoryList = result.data;
	    			}else{
	    				console.log(result)
	    			}
    			}catch(err){
    				console.log(err)
    			}
			},
			// 移除规格
			 deleteRow(index) {
				this.$confirm('是否删除该数据?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					this.foodForm.specs.splice(index, 1);
				});
			},
			// 添加规格
			addspecs(){
				this.foodForm.specs.push({...this.specsForm});
				for(var i in this.specsForm) {
					this.specsForm[i] = ""
				}
				this.dialogFormVisible = false;
				
			},
			tableRowClassName(row, index) {
		        if (index === 1) {
		        	return 'info-row';
		        } else if (index === 3) {
		        	return 'positive-row';
		        }
		        return '';
		    },
		    addFood(foodForm){
		    	this.$refs[foodForm].validate(async (valid) => {
					if (valid) {
						this.$store.dispatch("setAdminData", this.foodForm);
						this.$router.push('addDetails')
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
		    }
		}
    }
</script>

<style lang="less">
	// @import '../style/mixin';
	.form{
		min-width: 400px;
		margin-bottom: 30px;
		&:hover{
			box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
			border-radius: 6px;
			transition: all 400ms;
		}
	}
	.food_form{
		border: 1px solid #eaeefb;
		padding: 10px 10px 0;
	}
	.form_header{
		text-align: left;
		margin-bottom: 20px;
		padding-left: 30px;
		color: #b3b3b3;
		font-size: 14px;
	}
	.category_select{
		border: 1px solid #eaeefb;
		padding: 10px 30px 10px 10px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
	}
	.add_category_row{
		height: 0;
		overflow: hidden;
		transition: all 400ms;
		background: #f9fafc;
	}
	.showEdit{
		height: 185px;
	}
	.add_category{
		background: #f9fafc;
		padding: 10px 30px 0px 10px;
		border: 1px solid #eaeefb;
		border-top: none;
	}
	.add_category_button{
		text-align: center;
		line-height: 40px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border: 1px solid #eaeefb;
		border-top: none;
		transition: all 400ms;
		&:hover{
			background: #f9fafc;
			span, .edit_icon{
				color: #20a0ff;
			}
		}
		span{
			
		}
		.edit_icon{
			color: #ccc;
			transition: all 400ms;
		}
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	    border-color: #20a0ff;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
	}
	.avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
	}
	.cell{
		text-align: center;
	}
</style>
